<template>
    <div id="Approve">
        <div class="printJS-item">
            <div class="infoTitle">审批</div>
            <div class="tableWrap" style="text-align:right">
              <a-row :gutter="10" style="margin: 10px 0;" v-show="nextApprove">
                <a-col :span="2">审批人：</a-col>
                <a-col :span="5">
                  <a-input allowClear v-model="phidApproveName" placeholder="请选择审批人"  @click="showModel" />
                </a-col>
              </a-row>
              <a-row :gutter="10" style="margin: 10px 0">
                <a-col :span="2">备注：</a-col>
                <a-col :span="21">
                  <a-textarea :row="2" v-model="approveNote" placeholder="请输入备注" />
                </a-col>
              </a-row>
              <a-row :gutter="10" style="margin: 10px 0">
                <a-col :span="4" :push="1">
                  <a-button class="btn" type="primary" @click="submit">同意</a-button>
                  <a-button class="btn" type="danger" @click="cancel" style="margin-left:10px">拒绝</a-button>
                </a-col>
              </a-row>
            </div>
          </div>
        <SelectList type="checker" title="选择审批人" :searchObj="searchObj" :visible="selectVisible" @confirmSelect="confirmSelect" @cancel="closeModel" width="70%" :footer="null" />
    </div>
</template>
<!--
    nextApprove: 是否还有下一个节点
    searchObj: 请求审批人参数
    approve: function()同意
    refuse: function()拒绝
-->
<script lang="ts">
import { Component, Vue, Watch, Prop } from 'vue-property-decorator'
import util from '@/util/util'

@Component
export default class Approve extends Vue {
    @Prop({ type: Object, default: () => ({}) }) searchObj!: any // 传值
    @Prop({type: Boolean, default: true }) nextApprove!: any // 是否还有下一个节点

    approveNote: any = ''
    phidApproveName: any = ''
    phidApprove: any = ''
    // searchObj: any = {
    //     phid: 'LC917809381360271360',
    //     phidProject: '1001H2100000003KP094',
    //     billtype: 'FJ001'
    // }
    selectVisible: boolean = false
    @Watch('searchObj')
    watchSearchObj () {
      this.searchObj.phid && this.$nextTick(() => {
        this.getList()
      })
    }
    init () {
        this.searchObj.phid && this.getList()
    }
    confirmSelect (val: any, type:any) {
        this.phidApproveName = val.checkMemberName
        this.phidApprove = val.checkMemberId
        this.selectVisible = false
    }
    closeModel (val: any) {
        this.selectVisible = val || false
    }
    showModel () {
        this.selectVisible = true
    }
    confirm (val: any) {
        this.$emit('confirmSelect', val)
    }
    submit () {
        if (!this.phidApproveName && this.nextApprove) {
          this.$message.error('请选择后续审批人！')
          return
        }
        this.$emit('approve', { approveNote: this.approveNote, phidApprove: this.phidApprove, phidApproveName: this.phidApproveName })
    }
    cancel () {
        this.$emit('refuse', { approveNote: this.approveNote })
    }
    getList () {
    this.$api.fjapproveCheckerListFetch(this.searchObj).then((res: any) => {
        const data = res.data
        if (data.length && data.length === 1) {
            this.phidApproveName = data[0].checkMemberName
            this.phidApprove = data[0].checkMemberId
        }
    }).catch()
    }
}
</script>

<style lang="scss">
    .printJS-item{
      background: #fff;
      margin-bottom: 20px;
      border-radius: 8px;
      .yszf_wrap{
        padding:30px 24px;
        display: flex;
        flex-wrap: wrap;
        div{
          margin-bottom: 10px;
        }
      }
      .stepWrap{
        padding:30px 24px;
        display: flex;
        .step-left{
          width: 58%;
          padding-right: 40px;
        }
        .step-right{
          border-left: 1px solid #ccc;
          padding: 4px 26px;
          color: rgba(0, 0, 0, 0.45);
          font-size:14px;
        }
      }
      .infoTitle{
        padding:24px;
        border-bottom: 1px solid #D8D8D8;
        font-size: 16px;
        color:#333333;
        font-weight: bold;
        position: relative;
        &::after{
          content: '';
          width: 4px;
          height: 20px;
          background: #437DFC;
          position:absolute;
          top:50%;
          left: 0;
          margin-top: -10px;
          border-radius: 6px;
        }
      }
      .form-row{
        padding: 24px 24px 14px;
        display: flex;
        flex-wrap: wrap;
        .form-col {
          width: 25%;
          flex-shrink: 0;
        }
      }
      /deep/ .ant-form-item{
        margin-bottom: 10px;
      }
      .tableWrap{
        padding:30px 24px
      }
      .table-wrap{
        width: 1000px;
        display:flex;
        flex-wrap: wrap;
        // margin-bottom: 20px;
        padding: 30px 24px;
        .table-item{
          width:33.33%;
          display: flex;
          align-items: center;
          line-height: 50px;
          border: 1px solid #d9d9d9;
          .item-label{
            padding: 0 8px;
            width: 122px;
            border-right: 1px solid #d9d9d9;
            background: rgb(244, 244, 244);
            font-weight: bold;
            text-align: center;
          }
          .item-right{
            padding: 0 8px;
            width: calc(100% - 122px);
          }
        }
      }
      .imgWrap{
        padding:0 24px;
        div{
          margin:0 20px 20px 0;
          .label{
            font-size: 14px;
            color: #000000;
          }
          .img-item{
            width:220px;
            height: 220px;
            margin: 10px 10px 10px 0;
          }
        }
      }
      .ysccWrap{
        padding:24px;
        .ysqk-item{
          margin-bottom: 20px;
          display: flex;
          flex-direction: column;
          .label{
            color: #000000;
            font-size: 14px;
          }
          .ysqk-text{
            width: 1148px;
            height: 104px;
            margin-top: 10px;
            padding: 14px 20px;
            background: rgba(0, 0, 0, 0.04);
            border: 1px solid rgba(0, 0, 0, 0.15);
            font-size: 14px;
            color: #000;
          }
        }
        .ysqk-img{
          display: flex;
          .ysqk-img-l{
            display: flex;
            flex-direction: column;
            div{
              display:flex;
              flex-wrap: wrap;
              img{
                width: 220px;
                height: 220px;
                margin: 10px 10px 10px 0;
              }
            }
          }
          .ysqk-img-r{
            display: flex;
            flex-direction: column;
            div{
              display: flex;
              flex-wrap: wrap;
              img{
                width: 220px;
                height: 220px;
                margin: 10px 10px 10px 0;
              }
            }
          }
        }
        .img-item{
          width: 220px;
          height: 220px;
          margin: 10px 10px 10px 0;
        }
      }
      .pic-wrap{
        padding:15px 24px 40px;
        .img-item{
          width: 220px;
          height: 220px;
          margin: 10px 10px 10px 0;
        }
      }
    }
</style>
